<template>
    <div class="step5_container">
        <div class="step5_title">
            您可以在此页面配置SKU的价格(SKU低价/阶梯价/区间价)、SKU编码、SKU库存等数据,系统提供两种配置价格的方式,您只需要选择一种配置即可.
        </div>
        <div class="step5_main">
            <div class="main_left">
                <div style="width: 100%;margin: 6% auto;text-align: center;border-right: 1px solid #ddd;height: 400px">
                    <div>
                        <h4>通过导出的Excel表格可配置以下SKU的数据信息</h4>
                        <br>
                        <p style="font-size: 16px">1、可精细化配置颜色分类（SKU）名称</p>
                        <p style="font-size: 16px">2、可精细化配置销售属性（SKU）库存</p>
                        <p style="font-size: 16px">3、可精细化配置销售属性（SKU）价格</p>
                        <p style="font-size: 16px">4、可精细化配置销售属性（SKU）编码</p>
                    </div>
                    <div style="font-size: 16px; margin-bottom: 3%">
                        <span
                            onclick="lookHelpTutorial('https://www.yuque.com/zhinengdianchang/sx8ix9/gi2dgyqcl18pifu9')"
                            style="color: blue;cursor: pointer">
                            <u>查看Excel批量修改数据教程</u>
                        </span>
                    </div>
                    <div>
                        <el-button type="primary" icon="el-icon-download" @click="handleexport">导出Excel表格</el-button>
                        <!-- <el-button type="success" icon="el-icon-upload2">导入Excel表格</el-button> -->
                        <el-upload class="upload-demo" action="" :http-request="handleUploadFile" :show-file-list="false" style="display: inline-block; margin-left: 10px;">

                            <el-button type="success" icon="el-icon-upload2">导入Excel表格</el-button>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div class="main_right">
                <div style="width: 70%;margin: 6% auto;text-align: center;">
                    <h4>更为快速配置SKU价格、编码的方式</h4>
                </div>
                <div>
                    <span>使用价格模板配置SKU价格:</span>
                    <el-button type="primary" size="small" plain>使用我的价格模板配置SKU价格</el-button>
                    &nbsp;
                    <span style="color: blue;cursor: pointer">
                        <u>查看使用教程</u>
                    </span>
                </div>
                <div style="margin-top: 20px;">
                    <span>自定义SKU模糊低价:</span>
                    <el-button type="success" size="small" plain>开始设置SKU模糊低价</el-button>
                    &nbsp;
                    <span style="color: blue;cursor: pointer">
                        <u>查看使用教程</u>
                    </span>
                </div>
                <div style="margin-top: 4%;color: #999999"><i class="fa fa-info-circle" aria-hidden="true"></i>
                    价格模板和SKU模糊低价可搭配使用
                    <span style="cursor: pointer;color: tomato"><u>(查看已改动的SKU价格列表)</u></span>
                    <span style="cursor: pointer;color: slategray"><u>(重置本次调整)</u></span>
                </div>
                <el-divider />
                <div>
                    <div>
                        <span>快速配置SKU的编码:</span>
                        <el-button type="info" size="small" plain>使用自动编码生成SKU的编码</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { exportWillReleaseExcel, importWillReleaseExcel } from "@/api/product/productInfo";

export default {
    props: {
        releaseItem: {
            type: Object,
            default: {}
        },
        releaseInfo: {
            type: Object,
            default: {}
        }
    },
    data() {
        return {

        }
    },
    methods: {
        handleUploadFile(file) {
            console.log('file', file);
            const pddProductPropertyDto = this.releaseInfo
            importWillReleaseExcel(file.file, pddProductPropertyDto).then(res => {
                this.msgSuccess("上传成功");
            })
        },
        handleexport() {
            const price = this.releaseInfo.common.price
            const repositoryId = this.releaseInfo.common.repositoryId
            const seriesName = this.releaseItem.seriesName
            const quantity = this.releaseInfo.common.quantity
            exportWillReleaseExcel(price, quantity, repositoryId, seriesName).then(res => {
                this.msgSuccess("导出成功");
                const a = document.createElement('a')
                const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
                const url = URL.createObjectURL(blob)
                a.setAttribute('href', url)
                a.setAttribute('download', '导出文件.xlsx')
                a.click()
            })

        },
        handleEmitData() {
            this.$emit('send', {});
            return true
        },
    }
}
</script>

<style lang="scss" scope>
.step5_container {
    .step5_title {
        background-color: #f9f9f9;
        padding: 20px;
        padding-left: 40px;
        margin: 10px;
        font-size: 18px;
    }

    .step5_main {
        display: flex;

        h4 {
            font-size: 24px;
            font-weight: bold;
        }

        .main_left,
        .main_right {
            flex: 1;
            margin: 0 10px;
        }

        .main_left {}

        .main_right {}
    }
}
</style>
